有的时候我们想实现一个数字从a逐渐递增到b的跳动效果,如果用rxjs
的话就可以轻松实现。废话不多说直接上源码:
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/take';
import 'rxjs/add/operator/scan';
// start: 开始数字 end: 结束数字 duration: 持续时间 interval: 跳动几次 cb: 回调
export function jump({ start, end, duration = 300, interval = 10, cb }) {
const delta = Math.abs(end - start);
const sign = Math.sign(end - start);
const numberIncrease = Math.floor(delta / interval);
const timeIncrease = duration / interval;
Observable
.interval(timeIncrease)
.take(interval)
.scan((acc) => acc + (numberIncrease * sign), start)
.subscribe({
next: (n) => {
cb(n);
},
// 用complete保证数字最终会变为end
complete: () => {
cb(end);
},
});
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。